<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SSO登陆</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div class="login-main">
    <header class="layui-elip" style="width: 82%">SSO登陆</header>

    <!-- 表单选项 -->
    <form class="layui-form" th:action="@{/sso/login}" method="post">
        <div class="layui-input-inline">
            <!-- 用户名 -->
            <div class="layui-inline" style="width: 85%">
                <input type="text" id="user" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>
        <!-- 密码 -->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <input type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>

        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <div th:text="${passwordErr}" style="color: red;width: 500px"></div>
            </div>

        </div>


        <div class="layui-input-inline login-btn" style="width: 85%;margin-top: 20px">
            <button type="submit" lay-submit lay-filter="sub" class="layui-btn">登陆</button>
        </div>
        <hr style="width: 85%" />
        <p style="width: 85%"><a href="javascript:;" class="fr">忘记密码？</a><a th:href="@{/sso/goRegister}" class="fl">没有账号？立即注册</a></p>
    </form>
</div>

</body>
<script th:src="@{/static/layui/layui.all.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // <![CDATA[
    layui.use(['form','jquery','layer'], function () {
        var form   = layui.form;
        var $      = layui.jquery;
        var layer  = layui.layer;

        //添加表单监听事件,提交注册信息
        form.on('submit(sub)', function() {
            form.submit();
        });

    });
    // ]]>

</script>
<style>
    .login-main{
        width: 400px;
        height: 250px;
        background: #FFF;
        margin:200px auto;
        position: relative;
    }
    .login-main header{
        font-size: 30px;
        text-align: center;
    }
    .login-main form button{
        text-align: center;
    }
    .login-main form input{
        width: 370px;
        height: 35px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .layui-btn{
        width: 370px;
        height: 35px;
    }

</style>
</html>